<template>
  <div>
    <div ref="header" class="header">
      <van-icon size="18px" name="arrow-left" @click="goback" />
      <div class="title">查看房源<span>经纪人</span></div>
      <div />
    </div>
    <div class="cutpart" />
    <div class="houseinfo">
      <van-cell title="城市" size="large">{{ value1 }}</van-cell>
      <van-cell title="楼层" size="large">{{ value2 }}</van-cell>
      <van-cell title="户型" size="large">{{ value3 }}</van-cell>
      <van-cell title="电梯" size="large">{{ value4 }}</van-cell>
      <van-cell class="pcell" title="小区" size="large">
        <div>{{sendval.subdistrict}}</div>
      </van-cell>
      <van-cell title="详情" size="large" @click="showmore = true">
        更多描述
        <template #right-icon>
          <van-icon
            name="add-o"
            style="font-size: 16px; line-height: inherit"
          />
        </template>
      </van-cell>
    </div>
    <div class="houseinfo">
      <div class="tipsword">房源验核资料</div>
      <van-cell class="pcell" title="业主联系方式(选填)" size="large">
        <div>{{sendval.ownerMobile}}</div>
      </van-cell>
      <van-cell
        class="pcell"
        title="验核码(选填)"
        label="根据当地政策填写"
        size="large"
      >
        <div>{{sendval.auditedCode}}</div>
      </van-cell>
      <div class="cell">
        <div class="lbox">
          挂牌价格
          <!-- <span>限价 元m<span class="up">2</span></span> -->
        </div>
        <div class="rbox">
          <span>{{sendval.listedPrice}}</span><span>万</span>
        </div>
      </div>
      <div class="cell">
        <div class="lbox">建筑面积</div>
        <div class="rbox">
          <span>{{sendval.coveredArea}}</span><span class="mi">m<span class="up">2</span></span>
        </div>
      </div>
    </div>
    <div class="picimgup">
      <div class="tipsword">不动产证照片<span>(或其他权属证明)</span></div>
      <div class="picup">
        <van-uploader
          v-model="fileList1"
          accept="image/*"
          :max-count="1"
          :after-read="afterRead1"
          :deletable="false"
          disabled
        />
      </div>
      <div class="tipsword">委托书<span>(业主)</span></div>
      <div class="picup">
        <van-uploader
          v-model="fileList2"
          accept="image/*"
          :max-count="1"
          :after-read="afterRead2"
          :deletable="false"
          disabled
        />
      </div>
      <div class="tipsword">户型图<span>(根据您填写的户型展示)</span></div>
      <div class="picup">
        <van-uploader
          v-model="fileList3"
          accept="image/*"
          :max-count="1"
          :after-read="afterRead3"
          :deletable="false"
          disabled
        />
      </div>
      <div class="tipsword">室内照片<span>(根据户型添加)</span></div>
      <div class="picup">
        <van-uploader
          v-model="fileList4"
          accept="image/*"
          :max-count="15"
          :after-read="afterRead4"
          @delete="deleteimg"
          :deletable="false"
          disabled
        />
      </div>
      <div class="tipsword">
        周边环境<span>(让买家更快了解房源情况/选填)</span>
      </div>
      <div class="picup">
        <van-uploader
          v-model="fileList5"
          accept="image/*"
          :max-count="15"
          :after-read="afterRead5"
          @delete="deleteimg2"
          :deletable="false"
          disabled
        />
      </div>
      <div class="tipsword">
        视频介绍<span>(让您的房源展示更充分/选填)</span>
      </div>
      <div class="picup">
        <van-uploader
          v-model="fileList6"
          accept="video/*"
          :max-count="1"
          :after-read="afterRead6"
          :deletable="false"
          disabled
        />
      </div>
    </div>
    <div class="depart">
      <div class="tipsword">协作分佣<span>(更快成交)</span></div>
      <div class="choose showtitle">
        <span>服务名称</span>
        <span>金额比例</span>
        <span style="min-width: 60px">开启协作</span>
      </div>
      <div class="choose">
        <span>带看服务(元)</span>
        <span>0.01/次</span>
        <span>
          <van-switch
            v-model="dkchecked"
            active-color="#45b7cb"
            inactive-color="#ccc"
            disabled
            size="20px"
          />
        </span>
      </div>
      <div class="choose">
        <span>交易服务(%)</span>
        <van-stepper
          v-model="sendval.transactionService"
          step="0.01"
          :decimal-length="2"
          min="0"
          max="1"
          :disabled="jy"
        />
        <span>
          <van-switch
            v-model="jychecked"
            active-color="#45b7cb"
            inactive-color="#ccc"
            size="20px"
            :disabled="jy"
          />
        </span>
      </div>
      <div class="choose">
        <span>金融服务(%)</span>
        <van-stepper
          v-model="sendval.financialService"
          step="0.01"
          :decimal-length="2"
          min="0"
          max="1"
          :disabled="jr"
        />
        <span>
          <van-switch
            v-model="jrchecked"
            active-color="#45b7cb"
            inactive-color="#ccc"
            size="20px"
            :disabled="jr"
          />
        </span>
      </div>
      <div class="choose">
        <span>交割服务(%)</span>
        <van-stepper
          v-model="sendval.deliveryService"
          step="0.01"
          :decimal-length="2"
          min="0"
          max="1"
          :disabled="jg"
        />
        <span>
          <van-switch
            v-model="jgchecked"
            active-color="#45b7cb"
            inactive-color="#ccc"
            size="20px"
            :disabled="jg"
          />
        </span>
      </div>
      <div class="tip">* 经纪人可通过抢单或匹配方式获得其他房源的服务订单</div>
      <div class="tip">* 为提高成交效率所有房源必须开放带看协作</div>
      <div class="tip">* 业主房源（含委托挂牌）不允许修改协作分佣内容</div>
      <div class="tip">* 佣金计算公式=佣金比例*房源实际成交金额</div>
    </div>
    <div class="cut" />
    <!-- <div class="btnpart">
      <div class="cheak">
        <van-checkbox
          v-model="checked"
          shape="square"
          icon-size="14px"
          checked-color="#45b7cb"
        />
        <span style="margin-left: 5px"
          >我已阅读理解并同意<span class="xy" @click="toagreement"
            >《经纪人会员服务协议》</span
          ></span
        >
      </div>
      <button @click="jump">立即发布 快速获客</button>
      <div class="safe" />
    </div> -->

    <!-- <van-popup
      v-model="show1"
      :style="{ height: '40%' }"
      position="bottom"
      @close="onclose1"
    >
      <van-picker
        show-toolbar
        title="城市"
        :columns="columns1"
        visible-item-count="4"
        @confirm="onConfirm1"
        @cancel="onCancel1"
      />
    </van-popup>
    <van-popup
      v-model="show2"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose2"
    >
      <van-picker
        show-toolbar
        title="楼层"
        :columns="columns2"
        visible-item-count="4"
        @confirm="onConfirm2"
        @cancel="onCancel2"
      />
    </van-popup>
    <van-popup
      v-model="show3"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose3"
    >
      <van-picker
        show-toolbar
        title="户型"
        :columns="columns3"
        visible-item-count="4"
        @confirm="onConfirm3"
        @cancel="onCancel3"
      />
    </van-popup>
    <van-popup
      v-model="show4"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose4"
    >
      <van-picker
        show-toolbar
        title="电梯"
        :columns="columns4"
        visible-item-count="4"
        @confirm="onConfirm4"
        @cancel="onCancel4"
      />
    </van-popup> -->
    <van-popup v-model="show" @close="onclose">
      <div class="showpart">
        <div>恭喜上传成功</div>
        <div>
          预计核验时间30分钟，请耐心等待，可以在个人中心-房源管理中查看进度及修改
        </div>
        <div>
          <div class="sline" />
          <div class="">感谢信赖托付</div>
          <div class="sline" />
        </div>
      </div>
    </van-popup>
    <!-- <van-popup v-model="showmore" closeable round>
      <div class="moretip">
        <div class="tipwords">房屋类型</div>
        <div class="tipcard">
          <span
            v-for="item in houseTypelist"
            ref="houseType"
            :key="item"
            @click="housetypechoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">朝向类型</div>
        <div class="tipcard">
          <span
            v-for="item in houseDirectionlist"
            ref="direction"
            :key="item"
            @click="housedirectionchoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">装修情况</div>
        <div class="tipcard">
          <span
            v-for="item in renovationlist"
            ref="renovation"
            :key="item"
            @click="renovationchoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">房产证情况</div>
        <div class="tipcard">
          <span
            v-for="item in certificatelist"
            ref="certificate"
            :key="item"
            @click="certificatechoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">欠款情况</div>
        <div class="tipcard">
          <span
            v-for="item in owelist"
            ref="owe"
            :key="item"
            @click="owechoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">业主心态</div>
        <div class="tipcard">
          <span
            v-for="item in mentalitylist"
            ref="mentality"
            :key="item"
            @click="mentalitychoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">业主态度</div>
        <div class="tipcard">
          <span
            v-for="item in attitudelist"
            ref="attitude"
            :key="item"
            @click="attitudechoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">带看情况</div>
        <div class="tipcard">
          <span
            v-for="item in looklist"
            ref="look"
            :key="item"
            @click="lookchoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">是否接受贷款</div>
        <div class="tipcard">
          <span
            v-for="item in loanlist"
            ref="loan"
            :key="item"
            @click="loanchoose($event, item)"
            >{{ item }}</span
          >
        </div>
        <div class="btn">
          <button @click="clear2">重置</button>
          <button @click="confirmtip">确认</button>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>

<script>
import {
  buyhouseUphouse,
  buyhousechange,
  getSecondHouseEdit,
} from "../../apis/house.js";
import local from "../../utils/local";
import { getToken, getVideoToken } from "../../apis/house";
import { getUserInfo, getTurst } from "../../apis/user";
import { get19citylist } from "../../apis/buy.js";
const qiniu = require("qiniu-js");
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { getSecret, getUserId } from "@/utils/auth";
import { Toast } from "vant";
export default {
  data() {
    return {
      isAgent: 0,
      jy: true,
      jr: true,
      jg: true,
      isOrder: false,
      title: "发布房源",
      token: "",
      videotoken: "",
      sendval: {
        subdistrict: "",
        ownerMobile: "",
        auditedCode: "",
        listedPrice: "",
        coveredArea: "",
        takeServiceActive: "2",
        transactionService: "0.30",
        transactionServiceActive: "2",
        financialService: "0.15",
        deliveryServiceActive: "2",
        deliveryService: "0.05",
        financialServiceActive: "2",
        houseGenre: "",
        aspectType: "",
        decoration: "",
        propertyCert: "",
        unpaidSituation: "",
        ownerMentality: "",
        lookSituation: "",
        acceptLoan: "",
      },
      citylist: [],
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      value1: "请选择",
      value2: "请选择",
      value3: "请选择",
      value4: "请选择",
      columns1: [],
      columns2: ["低层1-7层", "中层8-16层", "高层17层及以上"],
      columns3: [
        "1室1厅1卫",
        "1室2厅1卫",
        "2室1厅1卫",
        "2室2厅1卫",
        "3室1厅1卫",
        "3室1厅2卫",
        "3室2厅1卫",
        "3室2厅2卫",
        "4室1厅1卫",
        "4室1厅2卫",
        "4室2厅1卫",
        "4室2厅2卫",
      ],
      columns4: ["有电梯", "无电梯"],
      choosetip: [],
      checked: false,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      dkchecked: false,
      departvalue1: 0,
      jychecked: false,
      departvalue2: 0,
      jrchecked: false,
      departvalue3: 0,
      jgchecked: false,
      upImg: [],
      surroundImg: [],
      showmore: false,
      houseTypelist: ["刚需小户", "大平层", "别墅", "公寓"],
      houseDirectionlist: [
        "东南",
        "南",
        "西南",
        "西",
        "西北",
        "北",
        "东北",
        "东",
        "南北通透",
        "东西通透",
      ],
      renovationlist: ["精装修", "毛坯", "简装"],
      certificatelist: ["不满2年", "满2年", "满5年"],
      owelist: ["有贷款", "红本在手"],
      mentalitylist: ["急售", "佛系随缘", "平稳"],
      attitudelist: ["挺好说话", "一般", "不好说话"],
      looklist: ["钥匙在手", "业主自住", "租客在住", "房屋空置"],
      loanlist: ["是", "否"],
      cansetInfo: true,
    };
  },
  watch: {
    showmore(newval) {
      if (newval) {
        if (local.get("setAgenthouse")) {
          const a = JSON.parse(local.get("setAgenthouse"));
          if (a.sendval.houseGenre) {
            let words = "";
            if (a.sendval.houseGenre == "1") {
              words = "刚需小户";
            } else if (a.sendval.houseGenre == "2") {
              words = "大平层";
            } else if (a.sendval.houseGenre == "3") {
              words = "别墅";
            } else if (a.sendval.houseGenre == "4") {
              words = "公寓";
            }
            this.$nextTick(() => {
              this.$refs.houseType.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.aspectType) {
            let words = "";
            if (a.sendval.aspectType == "1") {
              words = "东南";
            } else if (a.sendval.aspectType == "2") {
              words = "南";
            } else if (a.sendval.aspectType == "3") {
              words = "西南";
            } else if (a.sendval.aspectType == "4") {
              words = "西";
            } else if (a.sendval.aspectType == "5") {
              words = "西北";
            } else if (a.sendval.aspectType == "6") {
              words = "北";
            } else if (a.sendval.aspectType == "7") {
              words = "东北";
            } else if (a.sendval.aspectType == "8") {
              words = "东";
            } else if (a.sendval.aspectType == "9") {
              words = "南北通透";
            } else if (a.sendval.aspectType == "10") {
              words = "东西通透";
            }
            this.$nextTick(() => {
              this.$refs.direction.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.decoration) {
            let words = "";
            if (a.sendval.decoration == "1") {
              words = "精装修";
            } else if (a.sendval.decoration == "2") {
              words = "毛坯";
            } else if (a.sendval.decoration == "3") {
              words = "简装";
            }
            this.$nextTick(() => {
              this.$refs.renovation.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.propertyCert) {
            let words = "";
            if (a.sendval.propertyCert == "1") {
              words = "不满2年";
            } else if (a.sendval.propertyCert == "2") {
              words = "满2年";
            } else if (a.sendval.propertyCert == "3") {
              words = "满5年";
            }
            this.$nextTick(() => {
              this.$refs.certificate.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.unpaidSituation) {
            let words = "";
            if (a.sendval.unpaidSituation == "1") {
              words = "有贷款";
            } else if (a.sendval.unpaidSituation == "2") {
              words = "红本在手";
            }
            this.$nextTick(() => {
              this.$refs.owe.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.ownerMentality) {
            let words = "";
            if (a.sendval.ownerMentality == "1") {
              words = "急售";
            } else if (a.sendval.ownerMentality == "2") {
              words = "佛系随缘";
            } else if (a.sendval.ownerMentality == "3") {
              words = "平稳";
            }
            this.$nextTick(() => {
              this.$refs.mentality.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.ownerAttitude) {
            let words = "";
            if (a.sendval.ownerAttitude == "1") {
              words = "挺好说话";
            } else if (a.sendval.ownerAttitude == "2") {
              words = "一般";
            } else if (a.sendval.ownerAttitude == "3") {
              words = "不好说话";
            }
            this.$nextTick(() => {
              this.$refs.attitude.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.lookSituation) {
            let words = "";
            if (a.sendval.lookSituation == "1") {
              words = "钥匙在手";
            } else if (a.sendval.lookSituation == "2") {
              words = "业主自住";
            } else if (a.sendval.lookSituation == "3") {
              words = "租客在住";
            } else if (a.sendval.lookSituation == "4") {
              words = "房屋空置";
            }
            this.$nextTick(() => {
              this.$refs.look.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
          if (a.sendval.acceptLoan) {
            let words = "";
            if (a.sendval.acceptLoan == "1") {
              words = "是";
            } else if (a.sendval.acceptLoan == "2") {
              words = "否";
            }
            this.$nextTick(() => {
              this.$refs.loan.forEach((e) => {
                if (e.innerText == words) {
                  e.classList.add("active");
                }
              });
            });
          }
        }
      }
    },
  },
  created() {
    this.isAgent = this.$route.query.isAgent;
    this.getAgentOrder();
    this.getHouseInfo();
    this.getcitylist();
    this.getqntoken();
    this.getqnVideotoken();
  },
  beforeDestroy() {
    if (!this.sendval.houseId && this.cansetInfo) {
      const obj = { sendval: {}, upImg: [], surroundImg: [] };
      obj.sendval = this.sendval;
      obj.upImg = this.upImg;
      obj.surroundImg = this.surroundImg;
      local.set("setAgenthouse", JSON.stringify(obj));
    }
  },
  beforeUpdate() {
    if (this.jychecked) {
      this.sendval.transactionServiceActive = "2";
    } else {
      this.sendval.transactionServiceActive = "1";
    }
    if (this.jrchecked) {
      this.sendval.financialServiceActive = "2";
    } else {
      this.sendval.financialServiceActive = "1";
    }
    if (this.jgchecked) {
      this.sendval.deliveryServiceActive = "2";
    } else {
      this.sendval.deliveryServiceActive = "1";
    }
  },
  methods: {
    getHouseInfo() {
      if (this.$route.query.houseId) {
        getSecondHouseEdit({ houseId: this.sendval.houseId }).then((res) => {
          console.log("房源编辑信息", res);
          this.sendval = res.result;
          this.sendval.houseId = this.$route.query.houseId;
          this.value1 = res.result.city;
          if (res.result.floor == "1") {
            this.value2 = "低层1-7层";
          } else if (res.result.floor == "2") {
            this.value2 = "中层8-16层";
          } else if (res.result.floor == "3") {
            this.value2 = "高层17层及以上";
          }
          if (res.result.houseType == "1") {
            this.value3 = "1室1厅1卫";
          } else if (res.result.houseType == "2") {
            this.value3 = "1室2厅1卫";
          } else if (res.result.houseType == "3") {
            this.value3 = "2室1厅1卫";
          } else if (res.result.houseType == "4") {
            this.value3 = "2室2厅1卫";
          } else if (this.sendval.houseType == "5") {
            this.value3 = "3室1厅1卫";
          } else if (this.sendval.houseType == "6") {
            this.value3 = "3室1厅2卫";
          } else if (this.sendval.houseType == "7") {
            this.value3 = "3室2厅1卫";
          } else if (this.sendval.houseType == "8") {
            this.value3 = "3室2厅2卫";
          } else if (this.sendval.houseType == "9") {
            this.value3 = "4室1厅1卫";
          } else if (this.sendval.houseType == "10") {
            this.value3 = "4室1厅2卫";
          } else if (this.sendval.houseType == "11") {
            this.value3 = "4室2厅1卫";
          } else if (this.sendval.houseType == "12") {
            this.value3 = "4室2厅2卫";
          }
          if (this.sendval.hasElevator == "1") {
            this.value4 = "有电梯";
          } else if (this.sendval.hasElevator == "2") {
            this.value4 = "无电梯";
          }
          const obj = { url: "", isImage: true };
          obj.url = res.result.houseProperty;
          this.fileList1.push(obj);
          const obj2 = { url: "", isImage: true };
          obj2.url = this.$imgUrl + res.result.powerAttorney;
          this.fileList2.push(obj2);
          const obj3 = { url: "", isImage: true };
          obj3.url = this.$imgUrl + res.result.floorPlan;
          this.fileList3.push(obj3);
          res.result.houseImages.forEach((e) => {
            const obj4 = { url: "", isImage: true };
            obj4.url=e
            this.fileList4.push(obj4)
          });
        });
      }
    },
    getAgentOrder() {
      if (!this.$route.query.houseId) {
        getTurst().then((res) => {
          console.log("录入单", res);
          if (res.code == 200 || res.code == 201) {
            this.$dialog
              .alert({
                title: "温馨提示",
                message: "您当前已接受房源录入单，请上传订单房源信息",
                confirmButtonColor: "#45b7cb",
                theme: "round-button",
                messageAlign: "left",
              })
              .then(() => {});
            this.isOrder = true;
            this.sendval.houseProperty = res.result.property;
            this.sendval.houseId = res.result.house_id;
            this.jr = true;
            this.jy = true;
            this.jg = true;
            const obj = { url: "", isImage: true };
            obj.url = res.result.property;
            this.fileList1.push(obj);
          }
        });
      } else {
        this.title = "修改房源";
        this.sendval.houseId = this.$route.query.houseId;
        if (this.isAgent == 1) {
          this.jr = true;
          this.jy = true;
          this.jg = true;
        }
      }
      //  else {
      //   if (this.$route.query.houseId) {
      //     this.title = "修改房源";
      //     this.sendval.houseId = this.$route.query.houseId;
      //   } else {
      //     if (local.get("setAgenthouse")) {
      //       this.getsetInfo();
      //     }
      //   }
      // }
    },
    goback() {
      this.$router.go(-1);
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    async getqnVideotoken() {
      await getVideoToken().then((res) => {
        local.set("qnVideotoken", res.result.token);
        this.videotoken = local.get("qnVideotoken");
      });
    },
    async getcitylist() {
      await get19citylist({}).then((res) => {
        this.citylist = res.result.list;
        this.citylist.forEach((e, i) => {
          this.columns1[i] = e.name;
        });
      });
    },
    getsetInfo() {
      console.log(JSON.parse(local.get("setAgenthouse")));
      const a = JSON.parse(local.get("setAgenthouse"));
      this.sendval = a.sendval;
      if (a.sendval.sourceAdCode) {
        get19citylist({}).then((res) => {
          res.result.list.forEach((e) => {
            if (e.adcode == a.sendval.sourceAdCode) {
              this.value1 = e.name;
              return;
            }
          });
        });
      }
      if (a.sendval.floor) {
        if (a.sendval.floor == "1") {
          this.value2 = "低层1-7层";
        } else if (a.sendval.floor == "2") {
          this.value2 = "中层8-16层";
        } else if (a.sendval.floor == "3") {
          this.value2 = "高层17层及以上";
        }
      }
      if (a.sendval.houseType) {
        if (a.sendval.houseType == "1") {
          this.value3 = "1室1厅1卫";
        } else if (a.sendval.houseType == "2") {
          this.value3 = "1室2厅1卫";
        } else if (a.sendval.houseType == "3") {
          this.value3 = "2室1厅1卫";
        } else if (a.sendval.houseType == "4") {
          this.value3 = "2室2厅1卫";
        } else if (a.sendval.houseType == "5") {
          this.value3 = "3室1厅1卫";
        } else if (a.sendval.houseType == "6") {
          this.value3 = "3室1厅2卫";
        } else if (a.sendval.houseType == "7") {
          this.value3 = "3室2厅1卫";
        } else if (a.sendval.houseType == "8") {
          this.value3 = "3室2厅2卫";
        } else if (a.sendval.houseType == "9") {
          this.value3 = "4室1厅1卫";
        } else if (a.sendval.houseType == "10") {
          this.value3 = "4室1厅2卫";
        } else if (a.sendval.houseType == "11") {
          this.value3 = "4室2厅1卫";
        } else if (a.sendval.houseType == "12") {
          this.value3 = "4室2厅2卫";
        }
      }
      if (a.sendval.hasElevator) {
        if (a.sendval.hasElevator == "1") {
          this.value4 = "有电梯";
        } else if (a.sendval.hasElevator == "2") {
          this.value4 = "无电梯";
        }
      }
      if (a.sendval.houseProperty) {
        const obj = { url: "", isImage: true };
        obj.url = this.$imgUrl + a.sendval.houseProperty;
        this.fileList1.push(obj);
      }
      if (a.sendval.powerAttorney) {
        const obj = { url: "", isImage: true };
        obj.url = this.$imgUrl + a.sendval.powerAttorney;
        this.fileList2.push(obj);
      }
      if (a.sendval.floorPlan) {
        const obj = { url: "", isImage: true };
        obj.url = this.$imgUrl + a.sendval.floorPlan;
        this.fileList3.push(obj);
      }
      if (a.upImg.length > 0) {
        this.upImg = a.upImg;
        a.upImg.forEach((e) => {
          const obj = { url: "", isImage: true };
          obj.url = this.$imgUrl + e;
          this.fileList4.push(obj);
        });
      }
      if (a.surroundImg.length > 0) {
        this.surroundImg = a.surroundImg;
        a.surroundImg.forEach((e) => {
          const obj = { url: "", isImage: true };
          obj.url = this.$imgUrl + e;
          this.fileList5.push(obj);
        });
      }
      if (a.sendval.surroundingsVideo) {
        const surroundVideo = { url: "" };
        surroundVideo.url = this.$videoUrl + a.sendval.surroundingsVideo;
        this.fileList6.push(surroundVideo);
      }
      if (a.sendval.transactionServiceActive == "1") {
        this.jychecked = false;
      }
      if (a.sendval.financialServiceActive == "1") {
        this.jrchecked = false;
      }
      if (a.sendval.deliveryServiceActive == "1") {
        this.jgchecked = false;
      }
    },
    afterRead1(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.sendval.houseProperty = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead2(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.sendval.powerAttorney = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead3(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.sendval.floorPlan = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead4(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          file.key = res.key;
          _this.upImg.push(res.key);
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead5(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          file.key = res.key;
          _this.surroundImg.push(res.key);
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead6(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
      };
      const observer = {
        complete(res) {
          _this.sendval.surroundingsVideo = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "video/" + uuid(),
        this.videotoken,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    deleteimg(file) {
      const i = this.upImg.indexOf(file.key);
      this.upImg.splice(i, 1);
    },
    deleteimg2(file) {
      const i = this.surroundImg.indexOf(file.key);
      this.surroundImg.splice(i, 1);
    },
    jump() {
      const _this = this;
      const userId = getUserId();
      _this.$store.dispatch("manage/getInfo", { userId: userId });
      if (_this.checked) {
        console.log(_this.sendval);
        if (_this.isOrder || _this.$route.query.houseId) {
          _this.sendval.houseImages = this.upImg.join(",");
          _this.sendval.surroundingsImages = this.surroundImg.join(",");
          _this.$toast.loading({
            duration: 0,
            message: "加载中...",
            forbidClick: true,
          });
          buyhousechange(_this.sendval).then((res) => {
            console.log("buyhousechange", res);
            if (res.code == 200) {
              _this.$toast.clear();
              _this.$toast.success("修改成功");
              _this.$router.push({ path: "/home/me" });
            } else {
              _this.$toast(res.msg);
            }
          });
        } else {
          getUserInfo({ userId: userId }).then((res) => {
            console.log("getUserInfo", res);
            local.set("userInfo", JSON.stringify(res.result));
            if (res.result.agent.vip == "1") {
              _this.$dialog
                .confirm({
                  message: "取得会员资格即可发布房源",
                  messageAlign: "left",
                })
                .then(() => {
                  _this.$router.push({ path: "/buyjoin" });
                })
                .catch(() => {});
            } else if (res.result.agent.vip == "2") {
              _this.sendval.houseImages = this.upImg.join(",");
              _this.sendval.surroundingsImages = this.surroundImg.join(",");
              _this.$toast.loading({
                duration: 0,
                message: "加载中...",
                forbidClick: true,
              });
              buyhouseUphouse(this.sendval).then((res) => {
                console.log("buyhouseUphouse", res);
                if (res.code == 200) {
                  _this.$toast.clear();
                  _this.$toast.success("发布成功");
                  _this.show = true;
                  _this.clear();
                  _this.cansetInfo = false;
                } else if (res.code > 2000 && res.code < 3000) {
                  _this.$toast.fail("发布失败");
                  _this.$toast(res.msg);
                }
              });
            }
          });
        }
      } else {
        _this.$toast("请阅读并勾选下方协议");
      }
    },
    toagreement() {
      this.$router.push({ path: "/agentagreement" });
    },
    onclose() {
      this.show = false;
      this.$router.push({ path: "/home/me" });
    },
    onclose1() {
      this.show1 = false;
    },
    onclose2() {
      this.show2 = false;
    },
    onclose3() {
      this.show3 = false;
    },
    onclose4() {
      this.show4 = false;
    },
    onConfirm1(value) {
      this.value1 = value;
      this.citylist.forEach((e) => {
        if (e.name == value) {
          this.sendval.sourceAdCode = e.adcode;
          return;
        }
      });
      this.show1 = false;
      if (this.value2 == "请选择") {
        this.show2 = true;
      }
    },
    onCancel1() {
      this.show1 = false;
    },
    onConfirm2(value) {
      if (value == "低层1-7层") {
        this.sendval.floor = "1";
      } else if (value == "中层8-16层") {
        this.sendval.floor = "2";
      } else if (value == "高层17层及以上") {
        this.sendval.floor = "3";
      }
      this.value2 = value;
      this.show2 = false;
      if (this.value3 == "请选择") {
        this.show3 = true;
      }
    },
    onCancel2() {
      this.show2 = false;
    },
    onConfirm3(value) {
      if (value == "1室1厅1卫") {
        this.sendval.houseType = "1";
      } else if (value == "1室2厅1卫") {
        this.sendval.houseType = "2";
      } else if (value == "2室1厅1卫") {
        this.sendval.houseType = "3";
      } else if (value == "2室2厅1卫") {
        this.sendval.houseType = "4";
      } else if (value == "3室1厅1卫") {
        this.sendval.houseType = "5";
      } else if (value == "3室1厅2卫") {
        this.sendval.houseType = "6";
      } else if (value == "3室2厅1卫") {
        this.sendval.houseType = "7";
      } else if (value == "3室2厅2卫") {
        this.sendval.houseType = "8";
      } else if (value == "4室1厅1卫") {
        this.sendval.houseType = "9";
      } else if (value == "4室1厅2卫") {
        this.sendval.houseType = "10";
      } else if (value == "4室2厅1卫") {
        this.sendval.houseType = "11";
      } else if (value == "4室2厅2卫") {
        this.sendval.houseType = "12";
      }
      this.value3 = value;
      this.show3 = false;
      if (this.value4 == "请选择") {
        this.show4 = true;
      }
    },
    onCancel3() {
      this.show3 = false;
    },
    onConfirm4(value) {
      if (value == "有电梯") {
        this.sendval.hasElevator = "1";
      } else if (value == "无电梯") {
        this.sendval.hasElevator = "2";
      }
      this.value4 = value;
      this.show4 = false;
    },
    onCancel4() {
      this.show4 = false;
    },

    housetypechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.houseGenre = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.houseType.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "刚需小户") {
          this.sendval.houseGenre = "1";
        } else if (item == "大平层") {
          this.sendval.houseGenre = "2";
        } else if (item == "别墅") {
          this.sendval.houseGenre = "3";
        } else if (item == "公寓") {
          this.sendval.houseGenre = "4";
        }
      }
    },
    housedirectionchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.aspectType = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.direction.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "东南") {
          this.sendval.aspectType = "1";
        } else if (item == "南") {
          this.sendval.aspectType = "2";
        } else if (item == "西南") {
          this.sendval.aspectType = "3";
        } else if (item == "西") {
          this.sendval.aspectType = "4";
        } else if (item == "西北") {
          this.sendval.aspectType = "5";
        } else if (item == "北") {
          this.sendval.aspectType = "6";
        } else if (item == "东北") {
          this.sendval.aspectType = "7";
        } else if (item == "东") {
          this.sendval.aspectType = "8";
        } else if (item == "南北通透") {
          this.sendval.aspectType = "9";
        } else if (item == "东西通透") {
          this.sendval.aspectType = "10";
        }
      }
    },
    renovationchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.decoration = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.renovation.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "精装修") {
          this.sendval.decoration = "1";
        } else if (item == "毛坯") {
          this.sendval.decoration = "2";
        } else if (item == "简装") {
          this.sendval.decoration = "3";
        }
      }
    },
    certificatechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.propertyCert = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.certificate.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "不满2年") {
          this.sendval.propertyCert = "1";
        } else if (item == "满2年") {
          this.sendval.propertyCert = "2";
        } else if (item == "满5年") {
          this.sendval.propertyCert = "3";
        }
      }
    },
    owechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.unpaidSituation = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.owe.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "有贷款") {
          this.sendval.unpaidSituation = "1";
        } else if (item == "红本在手") {
          this.sendval.unpaidSituation = "2";
        }
      }
    },
    mentalitychoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.ownerMentality = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.mentality.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "急售") {
          this.sendval.ownerMentality = "1";
        } else if (item == "佛系随缘") {
          this.sendval.ownerMentality = "2";
        } else if (item == "平稳") {
          this.sendval.ownerMentality = "3";
        }
      }
    },
    attitudechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.ownerAttitude = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.attitude.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "挺好说话") {
          this.sendval.ownerAttitude = "1";
        } else if (item == "一般") {
          this.sendval.ownerAttitude = "2";
        } else if (item == "不好说话") {
          this.sendval.ownerAttitude = "3";
        }
      }
    },
    lookchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.lookSituation = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.look.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "钥匙在手") {
          this.sendval.lookSituation = "1";
        } else if (item == "业主自住") {
          this.sendval.lookSituation = "2";
        } else if (item == "租客在住") {
          this.sendval.lookSituation = "3";
        } else if (item == "房屋空置") {
          this.sendval.lookSituation = "4";
        }
      }
    },
    loanchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.acceptLoan = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.loan.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "是") {
          this.sendval.acceptLoan = "1";
        } else if (item == "否") {
          this.sendval.acceptLoan = "2";
        }
      }
    },
    clear() {
      this.value1 = "请选择";
      this.value2 = "请选择";
      this.value3 = "请选择";
      this.value4 = "请选择";
      this.fileList1 = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.fileList4 = [];
      this.fileList5 = [];
      this.fileList6 = [];
      this.sendval = {
        subdistrict: "",
        ownerMobile: "",
        auditedCode: "",
        listedPrice: "",
        coveredArea: "",
        takeServiceActive: "2",
        transactionService: "0.30",
        transactionServiceActive: "2",
        financialService: "0.15",
        deliveryServiceActive: "2",
        deliveryService: "0.5",
        financialServiceActive: "2",
        houseGenre: "",
        aspectType: "",
        decoration: "",
        propertyCert: "",
        unpaidSituation: "",
        ownerMentality: "",
        lookSituation: "",
        acceptLoan: "",
      };
      this.$refs.houseType.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.direction.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.renovation.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.certificate.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.owe.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.mentality.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.attitude.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.look.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.loan.forEach((e) => {
        e.classList.remove("active");
      });
    },
    clear2() {
      this.sendval.houseGenre = "";
      this.sendval.aspectType = "";
      this.sendval.decoration = "";
      this.sendval.propertyCert = "";
      this.sendval.unpaidSituation = "";
      this.sendval.ownerMentality = "";
      this.sendval.ownerAttitude = "";
      this.sendval.lookSituation = "";
      this.sendval.acceptLoan = "";
      this.$refs.houseType.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.direction.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.renovation.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.certificate.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.owe.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.mentality.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.attitude.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.look.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.loan.forEach((e) => {
        e.classList.remove("active");
      });
    },
    confirmtip() {
      this.showmore = false;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  background-color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    span {
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.cutpart {
  height: 50px;
}
.cut {
  height: 130px;
}
.houseinfo {
  .ask {
    margin-top: 5px;
  }
  input {
    width: 150px;
    text-align: right;
    border: none;
  }
  /deep/.pcell {
    .van-cell__value {
      padding-right: 17px;
    }
  }
  .cell {
    padding: 15px 0;
    margin: 0 15px;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    .mi {
      font-size: 12px;
      .up {
        font-size: 12px;
        vertical-align: super;
        transform: scale(calc(10 / 12));
      }
    }
    .telint {
      text-align: right;
      width: 100%;
      margin-right: 17px;
    }
    input {
      font-size: 15px;
    }
    .lbox {
      font-size: 16px;
      color: #333;
      span {
        font-size: 12px;
        font-weight: normal;
        color: #333;
      }
      .up {
        font-size: 12px;
        vertical-align: super;
      }
    }
    .rbox {
      font-size: 14px;
      text-align: right;
      display: flex;
      align-items: center;
      color: #333;
      margin-right: 17px;
      span {
        color: #333;
      }
    }
  }
}
.picup {
  margin: 0 15px;
}
.tipsword {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  span {
    font-size: 12px;
    font-weight: normal;
  }
}
.depart {
  .tip {
    margin: 0 15px;
    font-size: 13px;
    color: #333;
  }
  .choose {
    margin: 0 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    span {
      font-size: 14px;
      color: #333;
      &:last-child {
        // text-align: center;
        width: 60px;
        min-width: 60px;
        white-space: nowrap;
      }
    }
  }
  .showtitle {
    font-weight: bold;
    span {
      font-size: 15px;
      &:first-child {
        width: 80px;
      }
      &:nth-child(2) {
        text-align: center;
        width: 98px;
      }
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 5px 0 10px;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    padding-bottom: 5px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;
    .xy {
      color: #45b7cb;
    }
  }
  button:active {
    background-image: linear-gradient(to bottom right, #6fcddd7a, #49b9cd7b);
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.showpart {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  > div {
    &:first-child {
      color: #45b7cb;
      font-size: 16px;
      margin: 20px 0;
      font-weight: bold;
    }
    &:nth-child(2) {
      font-size: 14px;
      margin: 0 15px 30px;
    }
    &:nth-child(3) {
      padding: 0 0 20px;
      font-size: 13px;
      color: #333;
      display: flex;
      justify-content: center;
      .sline {
        height: 10px;
        width: 35px;
        border-bottom: 1px solid #333;
        margin: 0 5px;
      }
    }
  }
}
.moretip {
  width: 300px;
  height: 400px;
  overflow: scroll;
  padding: 0 15px;
  .tipwords {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin: 5px 0 15px;
  }
  .tipcard {
    span {
      display: inline-block;
      width: 70px;
      height: 30px;
      background-color: #f2f2f2;
      text-align: center;
      line-height: 30px;
      border-radius: 20px;
      margin-right: 6px;
      margin-bottom: 15px;
      font-size: 13px;
      color: #333;
      &:nth-child(4n) {
        margin-right: 0px;
      }
    }
    .active {
      background-color: #45b7cb;
      color: #fff;
    }
  }
  .btn {
    width: 100%;
    padding: 5px 15px 10px;
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    button {
      border: none;
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      &:first-child {
        width: 40%;
        background-color: #fff;
        color: #333;
        border: 1px solid #333;
        margin-right: 10px;
      }
      &:last-child {
        width: 50%;
        background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      }
    }
  }
}
input {
  font-size: 14px !important;
  color: #333;
  &::placeholder {
    color: #333;
  }
}
</style>
